<div id="charge_inquiry">
    <div class="charge_inquiry">
        <!--搜索栏-->
        <div class="searchBox">
            <el-row class="table_btn">
                <el-col :span="20">
                    <el-input id="selJiGou"  type="" v-model="parameters.orgName"  onclick="showMenu();" @change="changeOrg"  placeholder="选择机构" clearable readonly style="width: 130px;font-size: 12px" ></el-input>
                    <div id="menuContent"  class="menuContent" style="width: 200px;display:none; position: absolute;z-index: 1000;overflow: auto;">
                        <el-tree
                                node-key="id"
                                ref="orgTree"
                                :data="orgTree"
                                :props="defaultProps"
                                @node-click="treeCheck"
                                style="margin-top:0; width: 100%; height: 300px;"></el-tree>
                    </div>
                    <el-select v-model="parameters.corpId" filterable clearable placeholder="请选择"  style="width: 160px;">
                        <el-option label="请选择" value=""></el-option>
                        <el-option
                                v-for="item in merchantList"
                                :key="item.corpId"
                                :label="item.corpName"
                                :value="item.corpId">
                        </el-option>
                    </el-select>
                    <el-select v-model="parameters.payStatus" placeholder="全部状态" style="width:130px;">
                        <el-option label="全部缴费" value=""></el-option>
                        <el-option label="待缴费" value="04"></el-option>
                        <el-option label="已缴费" value="P-00"></el-option>
                        <el-option label="缴费失败" value="缴费失败"></el-option>
                        <el-option label="交易未明" value="交易未明"></el-option>
                    </el-select>
                    <el-date-picker
                            id="beginDate"
                            v-model="parameters.beginDate"
                            align="right"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="开始日期"
                            style="width:150px;font-size: 12px;">
                    </el-date-picker>
                    <el-date-picker
                            id="endDate"
                            v-model="parameters.endDate"
                            align="right"
                            type="date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            placeholder="结束日期"
                            style="width:150px;font-size: 12px;">
                    </el-date-picker>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </el-col>
                <el-col :span="4"  class="text-r">
                    <el-button type="primary" @click="exportPayment" icon="el-icon-plus">导出</el-button>
                </el-col>
            </el-row>

        </div>

        <el-table
                size="mini"
                :data="tableData"
                @row-click="handleRowHandle"
                @cell-mouse-enter="mouseEnterEvent"
                align="center"
                style="width: 100%;text-align: center;">
            <el-table-column
                    align="center"
                    prop="feeId"
                    width="120"
                    label="缴费编号">
            </el-table-column>
            <el-table-column
                    label="收费项目"
                    align="center"
                    prop="projectName"
                    width="260">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="120"
                    prop="feeUserName"
                    label="用户姓名">
            </el-table-column>
            <el-table-column
                    label="应缴金额"
                    align="center"
                    prop="totalAmt"
                    width="80">
            </el-table-column>
            <el-table-column
                    label="实缴金额"
                    align="center"
                    prop="factAmt"
                    width="80">
            </el-table-column>

            <el-table-column
                    label="缴费流水号"
                    align="center"
                    prop="paySeq"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="缴费状态"
                    align="center"
                    prop="payStatus" >
            </el-table-column>
<!--
           <el-table-column
                    label="所属机构"
                    align="center"
                    prop="deptName" >
            </el-table-column>-->
        </el-table>
        <!-- 分页-->
        <div class="block footerBox" id="fenyeBox" >
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    layout="prev, pager, next"
                    :current-page.sync="currentPage"
                    :total="totalCount">
            </el-pagination>
        </div>

        <!--详情弹出框-->
        <div class="isShowingBox" v-show="isShowingBox"></div>{{isOverflow}}
        <el-dialog :close-on-click-modal="modalAble" :close-on-press-escape="escAble" title="缴费信息" :visible.sync="dialogChargeInfoVisible" class="dialogDetails" :show-close="showDelBtn">
            <span class="delDialogBtn" @click="closeAddDialog">x</span>
            <div class="info-template-content">
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">缴费流水号</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payId}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">缴费人员</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.feeUserName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">所属机构</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.deptName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">缴费项目</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.projectName}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">应缴金额</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.totalAmt}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">实缴金额</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.factAmt}}</el-col>
                </el-row>
<!--                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">催缴次数</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.urgeCnt}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">提醒</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.isRemind}}</el-col>
                </el-row>-->
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付流水号</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.paySeq}}</el-col>
                </el-row>
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付时间</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payDate | formatDate}}</el-col>
                </el-row>
<!--                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付方式描述</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payType}}</el-col>
                </el-row>-->
                <el-row class="item-row">
                    <el-col :span="5" style="color: #666">支付状态</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.payStatus}}</el-col>
                </el-row>
                <el-row class="item-row" style="margin-bottom: 0">
                    <el-col :span="5" style="color: #666">对账状态</el-col>
                    <el-col :span="19" style="color: #333">{{chargeInfo.isSettle}}</el-col>
                </el-row>
            </div>

        </el-dialog>
    </div>
</div>

<script>
    Date.prototype.pattern=function(fmt) {
        var o = {
            "M+" : this.getMonth()+1, //月份
            "d+" : this.getDate(), //日
            "h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
            "H+" : this.getHours(), //小时
            "m+" : this.getMinutes(), //分
            "s+" : this.getSeconds(), //秒
            "q+" : Math.floor((this.getMonth()+3)/3), //季度
            "S" : this.getMilliseconds() //毫秒
        };
        var week = {
            "0" : "/u65e5",
            "1" : "/u4e00",
            "2" : "/u4e8c",
            "3" : "/u4e09",
            "4" : "/u56db",
            "5" : "/u4e94",
            "6" : "/u516d"
        };
        if(/(y+)/.test(fmt)){
            fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
        }
        if(/(E+)/.test(fmt)){
            fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);
        }
        for(var k in o){
            if(new RegExp("("+ k +")").test(fmt)){
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
            }
        }
        return fmt;
    };

    $(function () {
        placeHolde("#selJiGou","请选择机构");
        placeHolde("#beginDate","开始日期");
        placeHolde("#endDate","结束日期");
    });

    var layer,
        loadRole,
        loadSearch;
    layui.use('layer', function(){
        layer = layui.layer;
        loadRole  = layer.load(1, {shade: [0.5, '#000']});
    });

    var charge_inquiry =
            new Vue({
                el: "#charge_inquiry",
                data: {
                    isShowingBox:false,
                    escAble:false,
                    modalAble:false,
                    showDelBtn:false,
                    orgTree:'',
                    merchantList:'',
                    defaultProps: {
                        label:'label',
                        children: 'children',
                        leaf:'leaf'
                    },
                    value: '',
                    pageSize: 10,
                    tableData: [],
                    chargeInfo:{
                        feeUserId:"",
                        projectId:'',
                        payId:'', // 缴费流水号
                        feeUserName:'', // 用户姓名
                        deptName:'', // 所属机构
                        projectName:'', // 收费项目
                        urgeCnt:'',//催缴次数
                        totalAmt:'', // 应缴金额
                        factAmt:'', // 实缴金额
                        isRemind:'',//是否还需要提醒 0：是 1：否
                        payStatus:'', // 缴费状态
                        paySeq:'',//支付流水号
                        payDate:'',//支付时间
                        payType:'',//支付类型01 pos 02 现金
                        isSettle:''//是否对账
                    },
                    dialogChargeInfoVisible:false,
                    // 分页
                    currentPage: 1,
                    totalCount:'',
                    totalPage:'',
                    parameters:{
                        orgIds:'',
                        orgId:'',
                        orgName:'',
                        orgNames:'',
                        corpId:"",
                        currentPage:'',
                        feeUserName : '',//用户名模糊查询
                        payStatus : '',//缴费状态
                    },

                    beginDate:'',//开始时间
                    endDate: '',//结束时间
                },
                filters: {
                    formatDate:function(time) {
                        if(time == null){
                            return;
                        }else{
                            var date = new Date(time);
                            return date.pattern("yyyy-MM-dd hh:mm:ss");
                        }
                    }
                },
                methods: {
                    backHome:function () {
                        this.closeAddDialog();
                        this.isShowingBox = false;
                    },
                    /**
                     * 点击X关闭模态框
                     * */
                    closeAddDialog:function () {
                        this.isShowingBox = false;
                        if(charge_inquiry.dialogChargeInfoVisible){
                            charge_inquiry.dialogChargeInfoVisible=false;
                        }
                    },
                    changeOrg:function(){
                        charge_inquiry.parameters.orgId = '';
                    },
                    treeCheck:function(o,node,tree){
                        charge_inquiry.parameters.orgId = o.id;
                        charge_inquiry.parameters.orgName = o.label;
                        $("#menuContent").fadeOut("fast");

                        var params = {
                            'orgId':charge_inquiry.parameters.orgId
                        }
                        //获取所有商户
                        sendService('${basePath}bank/getAllMerchantList', params, function (resData) {
                            charge_inquiry.parameters.corpId =[];
                            if(resData.status == 'success'){
                                charge_inquiry.merchantList = resData.t;
                            }
                        });
                    },
                    mouseEnterEvent: function(row, event, column){
                        if(event.label == '操作'){
                            column.style.cursor="default"
                        }
                        if(event.label != '操作'){
                            column.style.cursor="pointer"
                        }
                    },
                    // 分页加载数据
                    handleCurrentChange: function(currentPage){
                        Pagesearch(charge_inquiry,'${basePath}/bank/deal/getFeeUserList',null,currentPage,
                            function (resData) {
                                if (resData.status == 'success') {
                                    resData.t.forEach(function (item) {
                                        if (item.payStatus == '04') {
                                            item.payStatus = '待缴费'
                                        } else if (item.payStatus == 'P-00') {
                                            item.payStatus = '已缴费'
                                        }
                                        if (item.isRemind == '0') {
                                            item.isRemind = '是'
                                        } else if (item.isRemind == '1') {
                                            item.isRemind = '否'
                                        }
                                        if (item.payType == '01') {
                                            item.payType = 'POS'
                                        } else if (item.payType == '02') {
                                            item.payType = '现金'
                                        }
                                        if (item.isSettle == '0') {
                                            item.isSettle = '否'
                                        } else if (item.isSettle == '1') {
                                            item.isSettle = '是'
                                        }
                                    });
                                }
                            });
                    },
                    // 点击进入详情页
                    handleRowHandle:function (row) {
                        charge_inquiry.isShowingBox = true;
                        charge_inquiry.dialogChargeInfoVisible = true;
                        charge_inquiry.chargeInfo = row;
                    },
                    // 导出
                    exportPayment: function () {
                       window.location.href = "${basePath}bank/deal/exportToExcel";
                    },
                    // 搜索按钮
                    searchFun: function(){
                        Pagesearch(this, '${basePath}/bank/deal/getFeeUserList', this.parameters, 1,
                            function (resData) {
                                if (resData.status == 'success') {
                                    resData.t.forEach(function (item) {
                                        if (item.payStatus == '04') {
                                            item.payStatus = '待缴费'
                                        } else if (item.payStatus == 'P-00') {
                                            item.payStatus = '已缴费'
                                        }
                                        if (item.isRemind == '0') {
                                            item.isRemind = '是'
                                        } else if (item.isRemind == '1') {
                                            item.isRemind = '否'
                                        }
                                        if (item.payType == '01') {
                                            item.payType = 'POS'
                                        } else if (item.payType == '02') {
                                            item.payType = '现金'
                                        }
                                        if (item.isSettle == '0') {
                                            item.isSettle = '否'
                                        } else if (item.isSettle == '1') {
                                            item.isSettle = '是'
                                        }
                                    });
                                    var totalPage = sessionStorage.getItem('totalPage');
                                    fenYeProblem(totalPage);
                                    sessionStorage.removeItem('totalPage');
                                }
                            });
                    },
                },
                created: function () {
                    sendService("${basePath}bank/org/getUserSelectOrgTree", null, function (resData) {
                        charge_inquiry.orgTree = resData.t;
                    });
                        // 从后台获取请求数据的URL
                    Pagesearch(this,'${basePath}/bank/deal/getFeeUserList', null,1,function (resData) {
                        if(resData.status == 'success'){
                            layer.close(loadRole);
                            resData.t.forEach(function (item) {
                                if (item.payStatus == '04') {
                                    item.payStatus = '待缴费'
                                } else if (item.payStatus == 'P-00') {
                                    item.payStatus = '已缴费'
                                }
                                if (item.isRemind == '0') {
                                    item.isRemind = '是'
                                } else if (item.isRemind == '1') {
                                    item.isRemind = '否'
                                }
                                if (item.payType == '01') {
                                    item.payType = 'POS'
                                } else if (item.payType == '02') {
                                    item.payType = '现金'
                                }
                                if (item.isSettle == '0') {
                                    item.isSettle = '否'
                                } else if (item.isSettle == '1') {
                                    item.isSettle = '是'
                                }
                            });
                            var totalPage = sessionStorage.getItem('totalPage');
                            fenYeProblem(totalPage);
                            sessionStorage.removeItem('totalPage');
                        }
                });
                },
                computed:{
                    isOverflow:function () {
                        if(this.isShowingBox){
                            $(".main-right").css({'overflow':"hidden"});
                        }
                        if(!this.isShowingBox){

                            $(".main-right").css({'overflow':"auto"});
                        }

                    }
                }
            });
    function showMenu() {
        $("#menuContent").slideDown("fast");
        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }
    function getChildrenId(children){
        var str = "";
        if (children != null){
            children.forEach(function (item) {
                str = str + item.id + ",";
                var child = item.children;
                if(child != null){
                    str = str + getChildrenId(child) ;
                }
            });
        }
        return str;
    }
</script>
<style scoped>
    .el-table__header,.el-table__body{
        width: 100% !important;
    }
    .el-table tr{
        height: 40px;
    }
    .addUsrtBtn{
        padding: 9px 15px;
        font-size: 12px;
    }
    /*table按钮样式调整开始*/
    .el-button--mini, .el-button--mini.is-round{
        padding: 4px 10px;
    }
    .userManageBox .editBtn{
        color: #409EFF;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .editBtn:hover{
        color: #fff;
        background-color: #409EFF;
        border-color: #409EFF;
    }

    .userManageBox .delBtn{
        color: #fa5555;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .delBtn:hover{
        color: #fff;
        background-color: #fa5555;
        border-color: #fa5555;
    }
    .userManageBox .resetBtn{
        color: #02dda7;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .resetBtn:hover{
        color: #fff;
        background-color: #02dda7;
        border-color: #02dda7;
    }
    .userManageBox .el-button{
        margin-left: 0;
    }
    /*table按钮样式调整结束*/
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    /*.el-table td, .el-table th.is-leaf{*/
    /*border: none;*/
    /*}*/
    .el-table::before{
        height: 0;
    }
    .addUserBox{
        margin-bottom: 0;
        border-bottom: 1px solid #f2f4f8;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }

    .add-template-form > div{
        margin-left: 45px;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    #menuContent{
        /*left: 0 !important;*/
        /*top: 40px !important;*/
        background-color: #eee;
        border: 1px solid #ccc;
    }
    .edit-template-form > div{
        margin-left: 45px;
    }
    /*.edit_dialog .el-form-item.is-required .el-form-item__label:before{*/
    /*content: '';*/
    /*}*/
    #addMenuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }


    .dialogDetails .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .dialogDetails .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }

    .dialogDetails .info-template-content{
        background: #ffffff;
    }
    .dialogDetails .item-row{
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 100px;
    }
    .dialogDetails .item-row div:first-of-type{
        color: #aaa;
        text-align: left
    }
    .dialogDetails .item-row div:last-of-type{
        color: #333;
        padding-left: 80px
    }

    .dialogDetails .info-template-content .el-row:nth-child(even){
        background-color: #F8F9FB;
    }
    .dialogDetails .info-template-content .el-row:last-of-type{
        margin-bottom: 30px;
    }
    .dialogDetails .el-dialog{
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }


    .el-dialog__header{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #aaa;
        font-size: 22px;

    }
    .el-dialog__body{
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body{
        padding: 50px 0 0 0 ;
    }
    .errorBox{
        color: #fa5555;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .errorBox2333{
        color: #fa5555;
        font-size: 12px;
    }
    /*#selManage label{*/
    /*position: relative;*/
    /*}*/
    #selManage label:before{
        content: '*';
        color: #fa5555;
        margin-right: 4px;
    }
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
</style>
